<template>
  <div class="v-common-comps-select-tree">
    <m-tree :tree-data="commonTreeData">
      <template #default="{ nodeData }">
        <span
          :id="nodeData.id"
          class="row"
          :class="{ _selected: nodeData.selected, _disabled: nodeData.disabled }"
          @click="handleNodeClick(nodeData)"
          @dblclick="dblclick"
        >
          <img
            :src="nodeData.icon"
            style="width: 16px; height: 16px; object-fit: contain"
          />
          <span class="text g-pd-lr-2">{{ locale.value === "en" ? nodeData.enName : nodeData.cnName }}</span>
          <!-- <NodeLabel v-if="nodeData.data"
                     :nodeData="nodeData.data"
                     :selected="nodeData.selected"
                     :disabled="nodeData.disabled || !nodeData.data.selectable" /> -->
        </span>
      </template>
    </m-tree>
  </div>
</template>

<script lang="ts" setup>
import { locale } from "@/util/locale";
import MTree from "@/common/Tree/MTree.vue";

interface Props {
  commonTreeData: any[];
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = withDefaults(defineProps<Props>(), {});

const emit = defineEmits<{
  (event: "handleCommonNodeClick", data: any): void;
  (event: "dblclickCommon"): void;
}>();

const handleNodeClick = node => {
  emit("handleCommonNodeClick", node);
};
const dblclick = () => {
  emit("dblclickCommon");
};
</script>

<style lang="scss">
@import "@/assets/css/theme.scss";
.v-common-comps-select-tree {
  height: 100%;
  overflow: auto;
  .row {
    vertical-align: middle;
    line-height: 16px;
    padding-left: 2px;
    // color: #000;
    cursor: pointer;
    &._selected {
      .text {
        background-color: $theme-color;
        color: #fff;
      }
    }
    &._disabled {
      .text {
        background-color: #fff;
        color: #979797;
      }
    }
    .text {
      margin-left: 2px;
      font-size: 12px;
      line-height: 16px;
      vertical-align: middle;
    }
  }
}
</style>
